<template>
  <div>
    <h3>总人数：{{ data.length }}</h3>
    <ul>
      <li v-for="item in data" :key="item.id">
        姓名: {{ item.name }}; 年纪: {{ item.age }}
      </li>
    </ul>
    <p>{{ car }}</p>
    <p>{{ money }}</p>
    <p>{{ age }}</p>
    <p>{{ title }}</p>
  </div>
</template>

<script>
export default {
  // 利用工厂函数提供数据，保证每次提供的数据，都是最新创建的，一个组件使用多次互不影响
  data() {
    return {}
  },
  props: {
    // 1. 基础的类型检查 Number String Boolean Object Array Function ...
    data: Array,
    car: String,
    money: Number,
    flag: Boolean,

    // 2. 多个可能的类型
    params: [String, Number, Boolean],

    // 3. 必填项 （要求用户必须传，如果不传，就报错）
    age: {
      type: Number,
      required: true
    },

    // 4. 默认值 （用户可传可不传，如果不传，使用默认值）
    title: {
      type: String,
      default: '大标题' 
    },
    // 默认值补充，如果是复杂类型，比如对象，比如数组，比较特殊，
    // 默认值需要通过函数返回值提供 (不用记，写错了会报错的)
    arr: {
      type: Array,
      // 目的：通过函数提供的函数，每次生成一个新的组件，默认值[] 都是新生成的，多个组件实例不影响
      default () {
        return []
      }
    },
    obj: {
      type: Object,
      default () {
        return {}
      }
    },

    // 5. 自定义验证函数 color 可选值 red yello green (可以解决一切需求，想怎么校验就怎么校验！更灵活)
    color: {
      validator (value) {
        // return true 通过校验
        // return false 没通过校验
        // 内部逻辑，自行判断提供
        // if (value === 'red' || value === 'yellow' || value === 'green') {
        //   return true
        // } else {
        //   return false // 没通过校验
        // }

        // arr.includes(值) => 判断数组是否包含某个值，如果包含，返回true，不包含，返回false
        const validArr = ['red', 'yellow', 'green', 'blue', 'orange']
        return validArr.includes(value)
      }
    }
  }
}
</script>

<style>

</style>